<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="RolePage" >
        <el-form-item>
          <el-input v-model="RolePage.keyword" placeholder="角色名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getRolePage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="RoleOpenFrom">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
<!--    主体-->
    <el-table
        :data="getPage.rows"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="拥有菜单">
              <span>{{ props.row.menus.map(x => x.name) }}</span>
            </el-form-item>
            <hr>
            <el-form-item label="拥有权限">
              <span>{{ props.row.permissions.map(x => x.name) }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="角色ID"
          prop="id">
      </el-table-column>
      <el-table-column
          label="角色名称"
          prop="name">
      </el-table-column>
      <el-table-column
          label="角色关键字"
          prop="sn">
      </el-table-column>
      <el-table-column
          label="操作"
          width="220">
        <template slot-scope="scope">
          <el-button @click="RoleDelete(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="RoleAddFrom(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="RolePermissionAddFrom(scope.row)" type="text" size="small">修改权限</el-button>
          <el-button @click="RoleMenuAddFrom(scope.row)" type="text" size="small">修改菜单</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    分页-->
    <el-pagination style="float:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="RolePage.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getPage.total">
    </el-pagination>

    <!--角色弹框-->
    <el-dialog title="添加/修改" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="RoleFrom" label-width="80px" ref="empFrom">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="RoleFrom.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="标识符">
          <el-input v-model="RoleFrom.sn"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="RoleSave" >提交</el-button>
      </div>
    </el-dialog>

    <!--权限弹框-->
    <el-dialog title="添加/修改" :visible.sync="dialogPermissionFormVisible" :close-on-click-modal="false">
      <div style="margin: 15px 0;"></div>
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div class="checkbox-table" v-for="(p,indexkey) in RolePermissionFrom" :key="p.sn">
        <template>
          <el-checkbox class="check1" style="font-weight: 600;margin-bottom: 15px "
                       v-model='rolePermission.permissionSns' :label="p.sn"
                       @change='handleCheck(1,indexkey)'>
            {{p.name}}
          </el-checkbox>
          <div style="margin-bottom: 20px;">
            <div v-for="c in p.children" class="line-check" :key="c.sn"
                 style="display: inline-block; margin-left: 20px;margin-bottom: 20px;" >
              <el-checkbox class="check2" @change='handleCheck(2,indexkey)'
                           v-model="rolePermission.permissionSns" :label="c.sn">
                {{c.name}}
              </el-checkbox>
            </div>
          </div>
        </template>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogPermissionFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="RolePermissionSave">提交</el-button>
      </div>
    </el-dialog>

    <!--菜单弹框-->
    <el-dialog title="添加/修改" :visible.sync="dialogMenuFormVisible" :close-on-click-modal="false">
      <div style="margin: 15px 0;"></div>
      <el-checkbox :indeterminate="isIndeterminateMenu" v-model="checkAllMenu" @change="handleCheckAllChangeMenu">全选</el-checkbox>
      <div class="checkbox-table" v-for="(p,indexkey) in RoleMenuFrom" :key="p.id">
        <template>
          <el-checkbox class="check1" style="font-weight: 600;margin-bottom: 15px "
                       v-model='roleMenu.menuIds' :label="p.id"
                       @change='handleCheckMenu(1,indexkey)'>
            {{p.name}}
          </el-checkbox>
          <div style="margin-bottom: 20px;">
            <div v-for="c in p.children" class="line-check" :key="c.id"
                 style="display: inline-block; margin-left: 20px;margin-bottom: 20px;" >
              <el-checkbox class="check2" @change='handleCheckMenu(2,indexkey)'
                           v-model="roleMenu.menuIds" :label="c.id">
                {{c.name}}
              </el-checkbox>
            </div>
          </div>
        </template>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogMenuFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="RoleMenuSave">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {batchRemoveUser} from "../../api/api";

export default {
  name:"Department",
  data() {
    return {
      getPage:{
        total: 10,
        rows:[]
      },
      RolePage:{
        pageSize:10,
        pageIndex:1,
        keyword:null
      },
      RoleFrom:{
        id:null,
        name:"",
        sn:"",
      },
      dialogFormVisible:false,
      //权限弹框
      dialogPermissionFormVisible:false,
      //菜单弹框
      dialogMenuFormVisible:false,
      //权限信息树
      RolePermissionFrom:[],

      //菜单信息树
      RoleMenuFrom:[],

      //保存权限
      rolePermission:{
        roleId:null,
        permissionSns:[]
    },
      //保存菜单
      roleMenu:{
        roleId:null,
        menuIds:[]
      },
      checkAll: false,
      isIndeterminate: true,
      isIndeterminateMenu:true,
      checkAllMenu:false,
    //  加载

      //所有sn
      allPermissionSns:[],
    //  所有菜单id
      allMenuIds:[]
    }
  },
  methods:{
    //保存菜单
    RoleMenuSave(){
      this.$confirm('此操作将修改角色菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res =>{
      //  保存
        console.log("这是选择后的ids")
        console.log(this.roleMenu.menuIds)
        this.$http.post("/Role/menu",this.roleMenu)
            .then(res =>{
              res =res.data
              if (res.code == 200){
                this.$message({
                  type: 'success',
                  message: res.msg
                });
              //  关闭弹框
                this.dialogMenuFormVisible = false
                this.getRolePage();
              }
            }).catch(res =>{
          this.$message({
            type: 'error',
            message: "网络异常"
          });
        })
      }).catch(res =>{
        this.$message({
          type: 'info',
          message: "已取消"
        });
      })
    },
    //修改菜单
    RoleMenuAddFrom(row){
      //查询所有菜单id
      this.getAllMenuIds();
      //查询一级权限,二级权限
      this.$http.get("/Menu/Level")
          .then(res =>{
            res = res.data;
            if (res.code == 200){
              this.RoleMenuFrom = res.data;
              console.log("菜单树：")
              console.log(this.RoleMenuFrom)
            }
          }).catch(res =>{
        this.$message({
          type: 'error',
          message: "网络异常"
        });
      });
    //  回显数据
      var ids = row.menus.map(x => x.id);
      this.roleMenu.menuIds = ids;
      console.log("回显的id：")
      console.log(this.roleMenu.menuIds)
      this.roleMenu.roleId = row.id;
      console.log("操作的角色id：")
      console.log(this.roleMenu.roleId)
    //  打开弹框
      this.dialogMenuFormVisible = true;
    },
    //查询所有菜单id
    getAllMenuIds(){
      this.allMenuIds = [];
      this.$http.get("/Menu/allId")
          .then(res =>{
            res = res.data
            if (res.code == 200){
              this.allMenuIds = res.data;
              console.log("所有菜单id:");
              console.log(this.allMenuIds)
            }
          }).catch(res =>{
            this.$message({
              type: 'error',
              message: "网络异常"
            });
      });
    },
    // 处理菜单选择事件  type 1:一级权限2:二级权限   a：一级权限的索引位置
    handleCheckMenu(type, a = 0) { // 多选框
      // 在已选中的权限列表中，查看是否存在一级权限 >-1 存在  <0 不存在
      let indexOf = this.roleMenu.menuIds.indexOf(this.RoleMenuFrom[a].id);
      if (type == 2) { // 二级菜单点击
        let index = 0;  //
        this.RoleMenuFrom[a].children.map(item => {
          // 已选中的权限列表中，是否包含当前一级权限下的某个子权限
          if (this.roleMenu.menuIds.indexOf(item.id) > -1) {
            index += 1;
          }
        })
        if (index > 0) {  // 已选中的权限列表中，包含当前一级权限下的某个子权限
          if (indexOf < 0) {  // 已选中的权限列表中，没有当前一级权限，则添加到已选中的权限列表中
            this.roleMenu.menuIds.push(this.RoleMenuFrom[a].id);
          }
        } else {  // // 已选中的权限列表中，不包含当前一级权限下的某个子权限
          if (indexOf > -1) {// 已选中的权限列表中，有当前一级权限，则删除
            this.roleMenu.menuIds.splice(indexOf, 1);
          }
        }
      } else {  // 一级菜单点击
        if (indexOf > -1) { // 已选中的权限中，包含当前一级权限，则将该一级权限下所有的子权限选中
          this.RoleMenuFrom[a].children.map(item => {
            if (this.roleMenu.menuIds.findIndex((n) => n == item.id) < 0) {
              this.roleMenu.menuIds.push(item.id)
            }
          })
        } else {
          // 已选中的权限中，不包含当前一级权限，则将该一级权限下所有的子权限移除
          this.RoleMenuFrom[a].children.map(item => {
            if (this.roleMenu.menuIds.findIndex((n) => n == item.id) > -1) {
              this.roleMenu.menuIds.splice(this.roleMenu.menuIds.findIndex((n) => n == item.id), 1);
            }
          })
        }
      }
      // 获取已选中的长度
      let checkedCount = this.roleMenu.menuIds.length;
      // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
      this.checkAllMenu = checkedCount === this.allMenuIds.length;
      // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
      this.isIndeterminateMenu = checkedCount > 0 && checkedCount < this.allMenuIds.length;
    },
    handleCheckAllChangeMenu(val){
      this.roleMenu.MenuIds = val ? this.allMenuIds : [];
      this.isIndeterminateMenu = false;
    },


    handleCheckAllChange(val){
      this.rolePermission.permissionSns = val ? this.allPermissionSns : [];
      this.isIndeterminate = false;
    },
    // 处理选择事件  type 1:一级权限2:二级权限   a：一级权限的索引位置
    handleCheck(type, a = 0) { // 多选框
      // 在已选中的权限列表中，查看是否存在一级权限 >-1 存在  <0 不存在
      let indexOf = this.rolePermission.permissionSns.indexOf(this.RolePermissionFrom[a].sn);
      if (type == 2) { // 二级菜单点击
        let index = 0;  //
        this.RolePermissionFrom[a].children.map(item => {
          // 已选中的权限列表中，是否包含当前一级权限下的某个子权限
          if (this.rolePermission.permissionSns.indexOf(item.sn) > -1) {
            index += 1;
          }
        })
        if (index > 0) {  // 已选中的权限列表中，包含当前一级权限下的某个子权限
          if (indexOf < 0) {  // 已选中的权限列表中，没有当前一级权限，则添加到已选中的权限列表中
            this.rolePermission.permissionSns.push(this.RolePermissionFrom[a].sn);
          }
        } else {  // // 已选中的权限列表中，不包含当前一级权限下的某个子权限
          if (indexOf > -1) {// 已选中的权限列表中，有当前一级权限，则删除
            this.rolePermission.permissionSns.splice(indexOf, 1);
          }
        }
      } else {  // 一级菜单点击
        if (indexOf > -1) { // 已选中的权限中，包含当前一级权限，则将该一级权限下所有的子权限选中
          this.RolePermissionFrom[a].children.map(item => {
            if (this.rolePermission.permissionSns.findIndex((n) => n == item.sn) < 0) {
              this.rolePermission.permissionSns.push(item.sn)
            }
          })
        } else {
          // 已选中的权限中，不包含当前一级权限，则将该一级权限下所有的子权限移除
          this.RolePermissionFrom[a].children.map(item => {
            if (this.rolePermission.permissionSns.findIndex((n) => n == item.sn) > -1) {
              this.rolePermission.permissionSns.splice(this.rolePermission.permissionSns.findIndex((n) => n == item.sn), 1);
            }
          })
        }
      }
      // 获取已选中的长度
      let checkedCount = this.rolePermission.permissionSns.length;
      // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
      this.checkAll = checkedCount === this.allPermissionSns.length;
      // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allPermissionSns.length;
    },
    //保存权限
    RolePermissionSave(){
      this.$confirm('此操作将修改角色权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res =>{
      //  调用保存
        this.$http.post("/Role/permission",this.rolePermission)
            .then(res =>{
              res =res.data;
              if (res.code == 200){
                this.$message({
                  type: 'success',
                  message: res.msg
                });
                //关闭弹框
                this.dialogPermissionFormVisible = false;
                this.getRolePage();
              }
            }).catch(res  =>{
          this.$message({
            type: 'error',
            message: "网络异常，请稍后在使"
          });
        })
      }).catch(res =>{
        this.$message({
          type: 'info',
          message: "已取消"
        });
      })
    },
    //查询所有权限的sn
    getPermissionSns(){
      this.allPermissionSns = [];
      this.$http.get("/permission/allSn")
          .then(res =>{
              res = res.data;
              if (res.code == 200){
                this.allPermissionSns = res.data;
                console.log(this.allPermissionSns)
              }
          }).catch(res =>{
              this.$message({
                type: 'error',
                message: "网络异常"
              });
      })
    },
    //修改权限
    RolePermissionAddFrom(row){
      //查询所有权限的sn
      this.getPermissionSns();
      //查询一级权限,二级权限
      this.$http.get("/permission/tree")
          .then(res =>{
            res = res.data;
            if (res.code == 200){
              this.RolePermissionFrom = res.data;
            }
          }).catch(res =>{
              this.$message({
                type: 'error',
                message: "网络异常"
              });
      });
      //回先数据
      var sns = row.permissions.map(x => x.sn);
      this.rolePermission.permissionSns = sns;
      this.rolePermission.roleId = row.id;
      //打开弹框
      this.dialogPermissionFormVisible = true;
    },
    //保存角色
    RoleSave(){
      this.$http.post("/Role",this.RoleFrom)
          .then(res =>{
            res =res.data
            if (res.code == 200){
              this.$message({
                type: 'success',
                message: res.msg
              });
              this.dialogFormVisible = false;
              this.getRolePage();
            }
          }).catch(res =>{
              this.$message({
                type: 'error',
                message: "网络异常"
              });
      })
    },
    //打开弹框
    RoleAddFrom(row){
      this.dialogFormVisible = true;
      this.RoleFrom = row;
    },
    //打开弹框
    RoleOpenFrom(){
      this.dialogFormVisible = true
      this.RoleFrom ={
        id:null,
        name:"",
        sn:"",
      }
    },
    //删除某行数据
    RoleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id;
        this.$http.delete("/Role/"+id)
            .then(res =>{
              if (res.data.code==200){
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                this.getRolePage()
              }else {
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
            })
            .catch(res =>{
              this.$message({
                type: 'error',
                message: "网络异常，请稍后在使"
              });
            })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val){
      this.RolePage.pageSize = val;
      this.RolePage.pageIndex = 1;
      console.log(this.RolePage);
      this.getRolePage();
    },
    handleCurrentChange(val){
      console.log(val);
      this.RolePage.pageIndex = val;
      this.getRolePage();
    },
    getRolePage(){
      this.$http.post("/Role/page",this.RolePage)
        .then(result=>{
          result = result.data;
          console.log(result)
          this.getPage = result.data;
          console.log(this.getPage);
        })
        .catch(result=>{
          alert("失败");
        });
    }
  },
  mounted(){
    this.getRolePage();
  }
}
</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand{
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
